<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    @import "mate.html"
    <title>农业后台系统1</title>
    <link rel="stylesheet" href="../assets/layui/css/layui.css">
    <link rel="stylesheet" href="../css/style.min.css">
</head>
<body class="body">

@import "header.html"

<div class="main">

    @import "aside.html"

    <div id="main-body" class="main-body">
        <div class="content processing">
            <div class="min-content">
                <div class="com-title"><span>管理权限系统</span></div>
                <div class="com-btn-group">
                    <button id="btn-add" class="y-btn y-btn-add" type="button"><span>添加</span></button>
                    <button id="btn-modify" class="y-btn y-btn-modify" type="button"><span>修改</span></button>
                    <button id="btn-delete" class="y-btn y-btn-delete" type="button"><span>删除</span></button>
                    <button id="btn-action" class="y-btn y-btn-noicon" type="button"><span>动作</span></button>
                </div>
                <div class="com-table-group">
                    <table class="com-table">
                        <thead class="thead">
                        <tr>
                            <td style="width: 40px"><span></span></td>
                            <td style="width: 40px"><span></span></td>
                            <td><span>菜单名称</span></td>
                            <td><span>启用</span></td>
                            <td><span>URL</span></td>
                        </tr>
                        </thead>
                        <tbody class="tbody">
                        <tr>
                            <td></td>
                        </tr>
                        </tbody>
                    </table>

                </div>

            </div>
        </div>
    </div>
</div>
@import "footer.html"
<script src="../assets/jquery.autocompleter.min.js"></script>
<script>
  $(function () {
    var tbody = $('tbody.tbody');
    $.ajax({
      url: '../assets/json/table-tbody.json',
      type: 'get',
      dataType: 'json',
      success: function (data) {
        var list = data.list, html = '';
        for (var i = 0; i < 2; i++) {
          html += '<tr><td><span><button data-id="'+list[i].cid+'" class="y-btn y-btn-add table-button"></button></span></td>' +
            '<td><span class="text-center"></span></td>' +
            '<td><span class="limit-words-more" title=' + list[i].cname + '>' + list[i].cname + '</span></td>' +
            '<td><span class="text-center">' + list[i].gid + '</span></td>'+
            '<td><span class="text-center" title=' + list[i].pimg + '>' + list[i].pimg + '</span></td></tr>';
        }
        tbody.html('').append(html);
      }
    });
//      表格内展开
    tbody.on('click','button.table-button', function (e) {
      e.stopPropagation();
      if($(this).hasClass('y-btn-add')){
        $(this).removeClass('y-btn-add table-button').addClass('y-btn-delete table-button');
        $.ajax({
          url: '../assets/json/table-tbody.json',
          type: 'get',
          dataType: 'json',
          success: function (data) {
            var list = data.list, html = '';
            for (var i = 0; i < 4; i++) {
              html += '<tr class="two-menu'+$(this).attr('data-id')+'"><td><span></span></td>' +
                '<td><span class="text-center"><input type="checkbox" data-id=' + list[i].cid + '></span></td>' +
                '<td><span class="limit-words-more" title=' + list[i].cname + '>' + list[i].cname + '</span></td>' +
                '<td><span class="text-center">' + list[i].gid + '</span></td>'+
                '<td><span class="text-center" title=' + list[i].pimg + '>' + list[i].pimg + '</span></td></tr>';
            }
            $(this).parents('tr').after(html);
          }.bind(this)
        });
      }else {
        $(this).removeClass('y-btn-delete table-button').addClass('y-btn-add table-button');
        $('tr.two-menu'+$(this).attr('data-id')).remove();
      }
    });

    var form = layui.form, layer = layui.layer;
    var colors = [
      {"label": "宁波工程学院"},
      {"label": "宁波工地学院"},
      {"label": "宁波大红印学院血活动活动发是否地方的"},
      {"label": "宁波碗里学院"}
    ];
    $('#comp-id').autocompleter({
      source: colors,
      empty: false,
      limit: 10,
      callback: function (value, index, selected) {
//        console.log(value,index,selected);
      }
    });

    //监听提交
    form.on('submit(form-search)', function (data) {
      console.log(data.field);
      return false;
    });

    var oInput;
//      添加按钮
    $('#btn-add').on('click', function (e) {
      e.stopPropagation();
      var body;
      dialogShow('添加基本信息', 'depManageadd.html', [1000, 600], {
        success: function (obj, index) {
          body = layer.getChildFrame('body', index);
        },
        btn: ['提交', '取消'],
        yes: function () {
          body.find('#form-submit').click();
        }
      });
    });
    //      修改按钮
    $('#btn-modify').on('click', function (e) {
      e.stopPropagation();
      oInput = $('table.com-table').find('input:checked');
      if (oInput.length === 0) {
        errorMsg('请选择要审核的数据！');
      } else if (oInput.length > 1) {
        errorMsg('请不要选择多条数据！');
      } else {
        var body;
        dialogShow('详细信息', 'depManageadd.html', [1000, 500], {
          success: function (obj, index) {
            body = layer.getChildFrame('body', index);
          },
          btn: ['提交', '取消'],
          yes: function () {
            body.find('#form-submit').click();
          }
        });
      }
    });

    //    删除按钮
    $('#btn-delete').on('click', function (e) {
      e.stopPropagation();
      oInput = $('table.com-table').find('input:checked');
      if (oInput.length === 0) {
        msg('请至少选择一条删除的数据！');
      } else {
        confirm('选中的数据是否删除？', {
          yes: function (index, obj) {
            //业务逻辑

            layer.close(index);
          }
        });
      }
    });

//    动作按钮
    $('#btn-action').on('click', function (e) {
      e.stopPropagation();
      oInput = $('table.com-table').find('input:checked');
      if (oInput.length === 0) {
        msg('请至少选择一条数据！');
      } else {
        var body;
        dialogShow('操作记录', 'action.html', [1000, 650], {
          success: function (obj, index) {
            body = layer.getChildFrame('body', index);
          },
          btn: ['提交', '取消'],
          yes: function () {
            body.find('#form-submit').click();
          }
        });
      }
    });



//      分页按钮
    var page = layui.laypage;
    page.render({
      elem: 'page-box',
      count: 100,
      groups: 3,
      theme: '#00a65b',
      layout: ['count', 'prev', 'page', 'next', 'skip'],
      jump: function (obj, first) {
        var curPage = obj.curr;
        if (!first) {
        }
      }
    });
  });
</script>
</body>
</html>